<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>articleRelease</title>
    <script src="js/jquery2.1.4.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap3.3.7.js"></script>
    <script src="vue/Vue.js"></script>
    <script src="vue/axios.js"></script>
</head>
<style>
    #btn1{
        position:absolute;
        right:100px;
        bottom:100px;
    }
</style>

<body>
<div id="app">
        <label for="name">题目</label>
        <input type="text" class="form-control" id="name" placeholder="请输入题目" v-model="tittle">

    年级：<select @change="getKnowledgeByGrade(grade)" v-model="grade">
        <option checked="checked">高一</option>
        <option >高二</option>
        <option >高三</option>

    </select>
     <!--   知识点：<select v-model="kp" >
            <option v-for="kp in knowledgepoints" v-model="knowledgepoints">{{kp.kdname}}</option>


    </select>-->
    <br>

    <!-- 富文本编辑-->
        <div class="form-group">
            <label for="name">文章正文</label>
            <textarea class="form-control" rows="3" style="height: 300px;width: 100%" v-model="content"></textarea>
        </div>

        <div class="form-group">
        <label for="inputfile">附件</label>
        <input class="file" id="inputfile" name="file" type="file"  @change="upload1"/>

    </div>
    选择权限：<select v-model="rage" >
    <option value ="0">本班可见</option>
    <option value ="1" >本年级可见</option>
    <option value="2" >本县市区可见</option>

    </select>

    <button @click="submitt1"  class="btn btn-primary" id="btn1">提交</button>
    </div>


    <script type="text/javascript">

        new Vue({
            el: '#app',
            //固定的结构
            data: { //在data定义变量和初始值
                //定义变量，值空数组
                tittle:'',
                grade:'',
                rage:'',
                appendLoc:'',
                content:'',
                knowledgepoints:[],
                kp:''
            },
            created() {

            },
            methods:{
                getKnowledgeByGrade(grade){

                    axios.get('/knowledgepoint/getKnowledgeByGrade',grade)
                        .then(response =>{//请求成功执行then方法
                            this.knowledgepoints=response.data.data.items.knowledgepoints;
                        })
                        .catch(error =>{
                        }) //请求失败执行catch方法

                },
                upload1(e){
                    let file = e.target.files[0];
                    let param = new FormData(); //创建form对象
                    param.append('file',file);//通过append向form对象添加数据
                    console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
                    let config = {
                        headers:{'Content-Type':'multipart/form-data'}
                    }; //添加请求头
                    axios.post('/articlerelease/upload',param,config)
                        .then(response =>{//请求成功执行then方法
                            console.log(response.data.data.url);
                            this.appendLoc=response.data.data.url;
                        })
                        .catch(error =>{
                        }) //请求失败执行catch方法

                },
                submitt1(){
                    var params = new URLSearchParams();
                    params.append("tittle",this.tittle);
                    params.append("content",this.content);
                    params.append("appendLoc",this.appendLoc);
                    params.append("rage",this.rage);
                    axios.post('/articlerelease/release',params)
                        .then(response =>{//请求成功执行then方法
                            if(response.code==20000){
                                layer.alert("文章发布成功");
                            }else{
                                layer.alert("文章发布失败，请稍后再试");
                            }
                        })
                        .catch(error =>{

                        }) //请求失败执行catch方法

                }
            }
        })
    </script>
</body>
</html>